<template>
  <div id="app">
    <h2>APP.VUE</h2>
    <div>
      <p>count:{{$store.state.count}}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="onSecondAdd">一秒后+1</button>
      </p>
      <h2>--------------------------------</h2>
      <p>全局count: {{ count }}</p>
      <p>
        <button @click="add">全局+</button>
      </p>
      <h2>===============================</h2>
      <p>getArrLength: {{$store.getters.getArrLength}}</p>
      <p>getArrLengthStr: {{$store.getters.getArrLengthStr}}</p>
    </div>
    <comp></comp>
  </div>
</template>

<script>
import comp from "./components/comp"

export default {
  name: 'App',
  components:{
    comp
  },
  computed:{

  },
  methods:{
    increment(){
      // this.$store.state.count++;
      this.$store.commit("increment")
    },
    decrement(){
      // this.$store.state.count--
      this.$store.commit("decrement")
    },
    //全局count相加
    add(){
      this.count ++
    },
    //一秒后+1
    onSecondAdd(){
      this.$store.dispatch("setTimeAdd")
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
